<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2021-03-23</title>
</head>
<body>
    <div id="skip">
        <h1>通过锚点定位跳到这里</h1>
    </div>

    <hr />

    <!-- 标题 h1-h6 -->
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <h4>这是一个标题</h4>
    <h5>这是一个标题</h5>
    <h6>这是一个标题</h6>

    <!-- 水平分割线  -->
    <hr />

    <!-- 段落和换行 -->
    <!-- 仅从视觉上看，一个段落等于两个换行 -->
    <p>段落1</p>
    <p>段落2</p>
    换行1 <br />
    换行2 <br />

    <!-- 没有语义的标签 -->
    <div>Hello HTML!</div>
    <span>text</span>

    <hr />

    <!-- 图像 -->
    <br />
    <img src="./bang.jpg" width="300px" alt="图像加载失败时显示改文本">
    <br />
    <hr />

    <!-- 文本格式化 -->
    <strong>strong标签加粗</strong> <br />
    <b>b标签加粗</b> <br />
    <i>斜体</i> <br />
    <u>下划线</u> <br />
    <s>删除线</s> <br />

    <br />
    <hr />
    <br />

    <!-- 超链接 -->
    <a href="www.baidu.com">跳转到百度</a>

    <!-- 锚点定位 -->
    <a href="#skip">跳转至 id 为 skip 的元素（在上方）</a>

    <br />
    <hr />
    <br />

    <!-- 有序列表  -->
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>

    <!-- 无序列表  -->
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

    <!-- 自定义列表 -->
    <dl>
        <dt>title</dt>
        <dd>item</dd>
        <dd>item</dd>
        <dt>title</dt>
        <dd>item</dd>
        <dd>item</dd>
    </dl>

    <br />
    <hr />
    <br />

    <!-- 表格 -->
    <table border="1" cellspacing="0" cellpadding="6px">
        <tr>
            <th>title1</th>
            <th>title2</th>
            <th>title3</th>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
    </table>

    <br />
    <table border="1" cellspacing="0" cellpadding="6px">
        <tr>
            <th>title1</th>
            <td colspan="2">data</td>
            <td>data</td>
        </tr>
        <tr>
            <th>title2</th>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>

    <br />
    <hr />
    <br />

    <!-- 表单 -->
    <form action="">
        <input type="text" placeholder="请输入用户名" value="Tom" /> <br />
        <input type="password" placeholder="请输入密码" value="" />

        <br />
        <br />
        <br />

        <label>
            男<input type="radio" name="sex" />
        </label>

        <label for="n">女</label>
        <input checked="checked" type="radio" name="sex" id="n" />

        <br />
        <br />
        <br />

        <label for="a">apple</label>
        <input type="checkbox" id="a" />

        <label for="b">banna</label>
        <input type="checkbox" id="b" />

        <label for="c">orange</label>
        <input type="checkbox" id="c" />

        <br />
        <br />
        <br />

        <input type="button" value="按钮" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        <!-- <input type="image" src="./bang.jpg" /> -->
        <input type="file" />


        <br />
        <br />
        <br />

        <!-- 下拉菜单 -->
        省份
        <select name="" id="">
            <option value="shandongsheng">山东省</option>
        </select>

        <br />
        <br />
        <br />

        <textarea name="" id="" cols="30" rows="10"></textarea>


        <br />
        <br />
        <br />

        <button>按钮元素-我也能跳转到顶部元素</button>

    </form>


</body>
</html>
